<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb
      separator="/"
      class="u-mb20"
    >
      <el-breadcrumb-item>
        <span
          class="c-text-high u-cursor"
          @click="back"
        >模板管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{pageTitle}}模板</el-breadcrumb-item>
    </el-breadcrumb>

    <SectionContainer class="u-p30 u-mb30">
      <el-form
        label-width="120px"
        :model="templateData"
        :rules="templateRules"
        ref="templateForm"
      >
        <!-- 基本信息 -->
        <SectionTitle class="u-mb30">基本信息</SectionTitle>
        <el-form-item label="模板名称">
          <el-input
            class="u-w450"
            placeholder="请输入模板名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属adx">
          <el-select
            class="u-w450"
            placeholder="请选择所属adx"
          ></el-select>
        </el-form-item>
        <el-form-item label="模板类型">
          <el-radio-group>
            <el-radio
              v-for="item in GENERALIZE_CREATIVITY_TYPE"
              :label="item.value"
              :key="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模板预览图">
          <PreviewPicture
            :data="templateFileList"
            :disabled="pageAction === 'detail'"
            @remove="templateUploadRemove"
          ></PreviewPicture>
          <el-upload
            v-show="templateFileList.length < 1"
            class="u-dib"
            ref="templateUpload"
            :disabled="pageAction === 'detail'"
            :action="`${UPLOAD_BASE_URL}/manage/api/bus/upload/uploadflie?fileGroups=3`"
            :headers="{'x-access-token': token}"
            list-type="picture-card"
            :show-file-list="false"
            :before-upload="templateUploadBefore"
            :on-success="templateUploadSuccess"
            :on-progress="templateUploadProgress"
            :on-error="templateUploadError"
          >
            <el-progress
              v-if="templateFile.status === 'uploading'"
              type="circle"
              :stroke-width="6"
              :percentage="templateFile.percentage"
            >
            </el-progress>
            <i
              v-else
              class="el-icon-plus"
            ></i>
          </el-upload>
          <Tip v-if="pageAction !== 'detail'">请上传jpg/png格式，1M以内</Tip>
        </el-form-item>
        <el-form-item label="2345广告形式ID">
          <el-select
            class="u-w450"
            placeholder="请选择广告形式ID"
          ></el-select>
        </el-form-item>
        <el-form-item label="波波素材形式">
          <el-select
            class="u-w450"
            placeholder="请选择素材形式"
          ></el-select>
        </el-form-item>
        <el-form-item label="波波广告位">
          <el-select
            class="u-w450"
            placeholder="请选择广告位"
          ></el-select>
        </el-form-item>

        <SectionTitle class="u-pt30 u-mb30">配置素材</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="素材格式">
            <el-radio-group>
              <el-radio :label="0">图片格式</el-radio>
              <el-radio :label="1">视频格式（mp4）</el-radio>
            </el-radio-group>
            <CustomContainer>
              <el-checkbox-group>
                <el-checkbox :label="0">jpg</el-checkbox>
                <el-checkbox :label="1">png</el-checkbox>
                <el-checkbox :label="2">gif</el-checkbox>
              </el-checkbox-group>
            </CustomContainer>
          </el-form-item>
          <el-form-item label="是否有时长">
            <el-radio-group>
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="视频时长限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
            <el-radio-group class="u-ml20">
              <el-radio :label="1">秒</el-radio>
              <el-radio :label="60">分</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="素材数量">
            <el-radio-group>
              <el-radio :label="1">1</el-radio>
              <el-radio :label="2">2</el-radio>
              <el-radio :label="3">3</el-radio>
              <el-radio :label="4">4</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="素材尺寸">
            <el-radio-group>
              <el-radio :label="0">已有尺寸</el-radio>
              <el-radio :label="1">自定义尺寸</el-radio>
            </el-radio-group>
            <CustomContainer>
              <el-radio-group class="u-lh32">
                <el-radio
                  class="u-w100"
                  :label="0"
                >160x160</el-radio>
                <el-radio
                  class="u-w100"
                  :label="1"
                >226x244</el-radio>
                <el-radio
                  class="u-w100"
                  :label="2"
                >480x360</el-radio>
                <el-radio
                  class="u-w100"
                  :label="3"
                >640x960</el-radio>
                <el-radio
                  class="u-w100"
                  :label="4"
                >720x360</el-radio>
                <el-radio
                  class="u-w100"
                  :label="5"
                >720x405</el-radio>
                <el-radio
                  class="u-w100"
                  :label="6"
                >720x422</el-radio>
                <el-radio
                  class="u-w100"
                  :label="7"
                >720x1280</el-radio>
                <el-radio
                  class="u-w100"
                  :label="8"
                >1280x720</el-radio>
                <el-radio
                  class="u-w100"
                  :label="9"
                >1080x1620</el-radio>
              </el-radio-group>
            </CustomContainer>
            <CustomContainer>
              <el-input
                class="u-w200"
                placeholder="长(像素)"
              ></el-input>
              <el-input
                class="u-w200 u-ml10"
                placeholder="宽(像素)"
              ></el-input>
            </CustomContainer>
          </el-form-item>
          <el-form-item label="素材大小限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
            <el-radio-group class="u-ml20">
              <el-radio :label="1">KB</el-radio>
              <el-radio :label="1024">MB</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">配置封面</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="添加封面">
            <el-radio-group>
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片尺寸">
            <el-input
              class="u-w200"
              placeholder="长(像素)"
            ></el-input>
            <el-input
              class="u-w200 u-ml10"
              placeholder="宽(像素)"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片大小限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
            <el-radio-group class="u-ml20">
              <el-radio :label="1">KB</el-radio>
              <el-radio :label="1024">MB</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片格式">
            <el-checkbox-group>
              <el-checkbox :label="0">jpg</el-checkbox>
              <el-checkbox :label="1">png</el-checkbox>
              <el-checkbox :label="2">gif</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">配置标题</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="添加标题">
            <el-radio-group>
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题字符限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">配置描述</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="添加描述">
            <el-radio-group>
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题字符限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">配置Logo</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="添加Logo/图标">
            <el-radio-group>
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题字符限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片尺寸">
            <el-input
              class="u-w200"
              placeholder="长(像素)"
            ></el-input>
            <el-input
              class="u-w200 u-ml10"
              placeholder="宽(像素)"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片大小限制">
            <el-input
              class="u-w200"
              placeholder="正整数"
            ></el-input>
            <el-radio-group class="u-ml20">
              <el-radio :label="1">KB</el-radio>
              <el-radio :label="1024">MB</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图片格式">
            <el-checkbox-group>
              <el-checkbox :label="0">jpg</el-checkbox>
              <el-checkbox :label="1">png</el-checkbox>
              <el-checkbox :label="2">gif</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">链接类型</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="链接类型">
            <el-checkbox-group>
              <el-checkbox :label="0">落地页</el-checkbox>
              <el-checkbox :label="1">安卓下载</el-checkbox>
              <el-checkbox :label="2">iOS下载</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <SectionTitle class="u-pt30 u-mb30">关联广告位</SectionTitle>
        <div class="u-pb20"></div>

        <SectionTitle class="u-pt30 u-mb30">操作信息</SectionTitle>
        <div class="u-pb20">
          <el-form-item label="是否启用"></el-form-item>
          <el-form-item label="最后操作人"></el-form-item>
          <el-form-item label="最后操作时间"></el-form-item>
        </div>
      </el-form>
    </SectionContainer>

    <div class="u-affix-bottom u-page-handle">
      <el-button
        size="small"
        type="primary"
        @click="handleSubmit"
      >确定</el-button>
      <el-button
        size="small"
        @click="back"
      >返回</el-button>
    </div>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import Tip from "@/components/tip";
import PreviewPicture from "@/components/preview-picture";
import CustomContainer from "@/components/custom-container";

import permissionMixin from "@/mixins/permission";
import { GENERALIZE_CREATIVITY_TYPE } from "@/assets/js/common-option";
import {
  sessionStorage,
  isPicture,
  isUploadFormat,
  getUploadFileName,
  getUploadImage
} from "@/utils";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    Tip,
    PreviewPicture,
    CustomContainer
  },
  data() {
    return {
      GENERALIZE_CREATIVITY_TYPE,
      UPLOAD_BASE_URL: process.env.VUE_APP_UPLOAD_BASE_URL,

      token: sessionStorage.get("USER").token,
      pageAction: this.$route.query.action,
      templateData: {},
      templateRules: {},

      // 模板预览图
      templateFile: {},
      templateFileList: []
    };
  },
  computed: {
    pageTitle() {
      return {
        create: "创建",
        edit: "编辑",
        detail: "查看"
      }[this.pageAction];
    }
  },
  methods: {
    // 模板预览/验证
    templateUploadBefore(file) {
      let format = "jpg,png";
      let type = isUploadFormat(format, file.name);
      let size = file.size / 1024;
      if (isPicture(file.name)) {
        getUploadImage(file).then(() => {
          // 类型
          if (!type) {
            this.$message.error(`请上传${format}格式的文件`);
            this.templateAbort(file);
            return false;
          }
          // 大小
          if (!size) {
            this.$message.error("文件大小不能超过1MB");
            this.templateAbort(file);
            return false;
          }
          return true;
        });
      } else {
        this.$message.error(`请上传${format}格式的文件`);
        this.templateAbort(file);
        return false;
      }
    },
    // 模板预览/上传成功
    templateUploadSuccess(res, file) {
      this.templateFile = file;
      this.templateFileList = [
        {
          name: getUploadFileName(res.data.uploadUrl),
          url: res.data.uploadUrl
        }
      ];
      // this.templateData.productLogoUrl = res.data.uploadUrl;
      // this.$refs.creativeForm.validateField("productLogoUrl");
    },
    // 模板预览/上传进度
    templateUploadProgress(event, file) {
      let percentage = parseInt(file.percentage, 10);
      this.templateFile = {
        ...file,
        percentage: percentage === 100 ? 99 : percentage
      };
    },
    // 中断上传
    templateAbort(file) {
      this.$refs.templateUpload.abort(file);
    },
    // 模板预览/上传失败
    templateUploadError(err, file) {
      this.templateFile = file;
    },
    // 模板预览/删除
    templateUploadRemove() {
      this.templateFileList = [];
      // this.templateData.productLogoUrl = "";
      // this.$refs.templateForm.validateField("productLogoUrl");
    },
    // 确定
    handleSubmit() {
      this.$refs.templateForm.validate(valid => {
        if (valid) {
        }
      });
    },
    // 返回
    back() {
      this.$router.replace({
        name: "other-template"
      });
    }
  }
};
</script>
